<template>
    <div class="toast">
        <i :class="type == 'success' ? 'icon-toast_chenggong': 
        (type == 'warn' ? 'icon-toast-jinggao':'icon-toast-shibai_huaban')" class="iconfont"></i>
        <span>{{ msg }}</span> 
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data () {
        return {

 
        }
    },
    computed: {
        ...mapState({
            msg: state => state.toastStatus.msg,
            type: state => state.toastStatus.type
        })
    }
}
</script>
 
<style lang = "less" scoped>
    .toast {
        position: fixed;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        padding: 10px 20px;
        background-color: #fcfcfc;
        border-radius: 5px;
        box-shadow: 0 0 10px #fff;
        .icon-toast-shibai_huaban {
            color: red;
        }
        .icon-toast-jinggao {
            color: orange;
        }
        .icon-toast_chenggong {
            color: green;
        }
        i {
            margin-right: 5px;
        }
    }
</style>